<template>
  <div>
    <page-list :x-uri="uri" :x-tabs="tabs" :doactions="doactions" :tree="true" :lazy="true" :lazy-fun="loadChild" :custom-components="custom">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'course.live.large.section'" :disabled="!isFinished" size="mini" type="primary" @click="create">新建课时</el-button>
        <el-button v-if="isFinished" v-auth="'course.live.large.section'" size="mini" type="primary" @click="finish">完结课时</el-button>
      </template>
    </page-list>
    <sort-dialog :value.sync="sortValue" :visible.sync="visible" :disable-submit="disableSubmit" @submit="sortSubmit" />
    <el-dialog :visible="liveVisible" :title="title" :close-on-click-modal="false" width="420px" center @close="closeLive">
      <el-row class="live-row">讲师姓名：{{ teacher }}</el-row>
      <el-row class="live-row">直播时间：{{ time }}</el-row>
      <el-row class="live-row">直播地址：{{ link }}</el-row>
      <el-row type="flex" justify="end" class="sort-action">
        <el-button size="small" @click="closeLive">关闭</el-button>
        <el-button type="primary" size="small" @click="copy">复制</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Price from './components/price.vue';
import Live from './components/live.vue';
import SortDialog from '@/components/update-sort-dialog';
import { mapGetters } from 'vuex';

export default {
  components: {
    PageList,
    SortDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: 'course/admin/live/' + this.$route.params.id + '/section',
      link: '',
      time: '',
      title: '',
      teacher: '',
      course_title: '',
      liveVisible: false,
      custom: {
        price: Price,
        live: Live
      },
      tabs: [
        {
          title: '大班课',
          uri: '/course/live/list',
          meta: {
            permission: 'course.live.large'
          }
        },
        {
          title: '课时列表',
          uri: '/course/live/' + this.$route.params.id + '/section',
          meta: {
            permission: 'course.live.large.section'
          }
        }
      ],
      visible: false,
      itemId: 0,
      disableSubmit: false,
      sortValue: 1, // 排序值
      doactions: [
        {
          title: '排序',
          meta: { permission: 'site.pc.personal.menu.sort' },
          callback: this.sortPopover,
          display({ row }) {
            return row.is_last;
          }
        },
        {
          title: '添加课时',
          meta: { permission: 'course.live.large.section' },
          callback: this.create,
          display: ({ row }) => {
            return this.isFinished && row.video_sec_level > row.level;
          }
        },
        {
          title: '去上课',
          meta: { permission: 'course.live.large.section' },
          callback: this.golive,
          display: ({ row }) => {
            return row.video_sec_level == row.level && row.live != 2;
          }
        },
        { title: '编辑', meta: { permission: 'course.live.large.section' }, callback: this.edit },
        {
          title: '删除',
          meta: { permission: 'course.live.large.section' },
          callback: this.deleteSection,
          display: ({ row }) => {
            return this.isFinished;
          }
        }
      ]
    };
  },
  computed: {
    ...mapGetters('pageList', ['response']),
    isFinished() {
      return !this.response.is_finished;
    }
  },
  methods: {
    // 排序弹出层
    sortPopover({ row }) {
      this.visible = true;
      this.itemId = row.id;
      this.sortValue = row.best_sort;
    },
    // 保存排序
    sortSubmit() {
      this.disableSubmit = true;
      this.$http.put(
        '/course/admin/live/' + this.$route.params.id + '/section/' + this.itemId + '/sort',
        {
          best_sort: this.sortValue
        },
        ({ msg }) => {
          this.$message.success(msg);
          this.disableSubmit = false;
          this.visible = false;
          this.reload();
        },
        ({ msg }) => {
          this.$message.error(msg);
          this.disableSubmit = false;
        },
        false
      );
    },
    finish: function() {
      this.$box
        .confirm('完结课时后将不能添加或删除课时，确认完结吗')
        .then(() => {
          this.$http.post(
            '/course/admin/live/' + this.$route.params.id + '/finished',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 新建课时
    create: function({ row }) {
      const pid = row ? row.id : 0;
      this.$router.push({ path: '/course/live/' + this.$route.params.id + '/section/' + pid + '/create' });
    },
    closeLive() {
      this.liveVisible = false;
    },
    copy() {
      this.$copyText(`课程名称：${this.course_title}\n\n课时名称：${this.title}\n\n讲师姓名：${this.teacher}\n\n直播时间：${this.time}\n\n直播地址：${this.link}`).then(
        msg => {
          this.$message.success('复制成功', _ => {
            this.liveVisible = false;
          });
        },
        err => {
          this.$message.error('复制失败');
          console.log(err);
        }
      );
    },
    // 去上课
    golive: function({ row }) {
      const sid = row ? row.id : 0;
      this.$http.put(
        '/course/admin/live/' + this.$route.params.id + '/section/' + sid + '/live',
        {},
        res => {
          this.link = res.data.uri;
          this.teacher = res.data.teacher_name;
          this.time = row.simple_time;
          this.title = row.title;
          this.course_title = res.data.course_title;
          this.liveVisible = true;
          // window.open(res.data, '_blank');
        },
        error => {
          this.$message.error(error.msg);
        }
      );
    },
    // 编辑课时
    edit: function({ row }) {
      const sid = row ? row.id : 0;
      this.$router.push({ path: '/course/live/' + this.$route.params.id + '/section/' + sid + '/edit' });
    },
    deleteSection: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/course/admin/live/' + this.$route.params.id + '/section/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    loadChild: function(row, treeNode, resolve) {
      this.$http.get(
        'course/admin/live/' + this.$route.params.id + '/section/' + row.id,
        {
          pid: row.id
        },
        ({ data }) => {
          resolve(data);
        },
        response => {
          resolve([]);
          this.$message.error(response.msg);
        },
        false
      );
    }
  }
};
</script>

<style>
.live-row {
  margin: 15px 0;
}
</style>
